﻿
@{
    ViewBag.Title = "Add";
}

<h2>新增车辆</h2>

<script src="~/Scripts/axios.min.js"></script>
<script src="~/Scripts/vue.min.js"></script>

<!--页面模板区域-->
<div id="addCar">
    <form>
        <table>
            <tr>
                <td><label>厂牌型号：</label><input id="carType" type="text" v-model="formData.carType" /></td>
                <td><label>车牌号：</label><input id="carNumber" type="text" v-model="formData.carNumber" /></td>
            </tr>
            <tr>
                <td><label>司机名：</label><input id="driverName" type="text" v-model="formData.driverName" /></td>
                <td><label>所属公司：</label><input id="driverCompany" type="text" v-model="formData.driverCompany" /></td>
            </tr>
            <tr>
                <td><label>购置时间：</label><input id="driverName" type="date" v-model="formData.buyDate" /></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td><input id="btnSubmit" type="button" value="提交" v-on:click="add()"/></td>
                <td><input id="btnRest" type="reset" value="取消" /></td>
            </tr>
        </table>
    </form>
</div>

<!--页面的功能区域-->
<script>
    //定义一个Vue的实例
    var app = new Vue({
        el: '#addCar',  //关联的元素（element）
        data: {    //定义数据模型对象
            formData: {
                carType: '',  //车辆型号
                carNumber: '', //车牌号
                driverName: '',//司机名
                driverCompany: '',//司机所属公司
                buyDate:'',
            }
        },
        computed: {  //计算属性
            //计算属性，是根据data里面的原始属性来计算出来的新的值
            //计算属性的好处：就在于对计算结果有缓存处理，可以提高数据访问的效率
        },
        methods: {  //定义一些方法
            login() {  //提交事件的处理方法
                //1.调试打印
                console.log(this.formData);

                //2.验证数据是否有效（ 所有用户输入的数据，都是不可采信的）
                if (this.formData.carType == '') {  //非空验证
                    alert('车辆型号不能为空');
                    return;
                }
                var numberExp = new RegExp(/^[0-9]$/);  //正则验证
                if (!numberExp.test(this.formData.carNumber)) {
                    alert('公里数必须为数字');
                    return;
                }

                //调用WebApi进行添加
                axios.post("http://localhost:12345/api/Acount/login", this.formData)
                    .then((res) => {
                        console.log(res.data);
                        if (res.data.result > 0) {
                            window.sessionStorage.setItem('UserName', res.data.userName);
                            //window.location.href = '/Car/Index';
                            window.location.href = '@Url.Action("Index","Car")';
                        } else {
                            alert('添加失败');
                        }

                    });
            }
        },
        created() {  //8大生命周期函数之创建后
            //因为添加页面有可能会用到下拉绑定
            //在此处加载下拉里面的数据
        },
        mounted() {

        }

    });
</script>
